<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面转化成图片</title>
</head>
<body>
<div id='cut_area'>
    <button class="print">点击执行</button>
    <div style="width: 50px;height: 30px;border: 1px solid #fefefe;background-color: #abcdef"></div>
</div>
<canvas id="bg_canvas"></canvas>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jcanvas/21.0.1/jcanvas.js"></script>
<script type="text/javascript">
	var defaultStrokeWidth = 1; //画矩形选取框的线宽

	/**
	 * 选取划线的canvasExt
	 * @type {{drawRect: canvasExt.drawRect}}
	 */
	var canvasExt = {
		/**
		 *  画矩形
		 * @param canvasId canvasId
		 * @param penColor 画笔颜色
		 * @param strokeWidth 线宽
		 */
		drawRect: function (canvasId, penColor, strokeWidth) {
			var that = this;

			that.penColor = penColor;
			that.penWidth = strokeWidth;
			var canvas = document.getElementById(canvasId);
			//canvas 的矩形框
			var canvasRect = canvas.getBoundingClientRect();
			//canvas 矩形框的左上角坐标
			var canvasLeft = canvasRect.left;
			var canvasTop = canvasRect.top;

			// 要画的矩形的起点 xy
			var x = 0;
			var y = 0;

			//鼠标点击按下事件，画图准备
			canvas.onmousedown = function(e) {

				//设置画笔颜色和宽度
				var color = that.penColor;
				var penWidth = that.penWidth;
				// 确定起点
				x = e.clientX - canvasLeft;
				y = e.clientY - canvasTop;
				// 添加layer
				$("#"+canvasId).addLayer({
					type: 'rectangle',
					strokeStyle: color,
					strokeWidth: penWidth,
					name:'areaLayer',
					fromCenter: false,
					x: x, y: y,
					width: 1,
					height: 1
				});
				// 绘制
				$("#"+canvasId).drawLayers();
				$("#"+canvasId).saveCanvas();

				//鼠标移动事件，画图
				canvas.onmousemove = function(e){

					// 要画的矩形的宽高
					var width = e.clientX-canvasLeft - x;
					var height = e.clientY-canvasTop - y;

					// 清除之前画的
					$("#"+canvasId).removeLayer('areaLayer');

					$("#"+canvasId).addLayer({
						type: 'rectangle',
						strokeStyle: color,
						strokeWidth: penWidth,
						name:'areaLayer',
						fromCenter: false,
						x: x, y: y,
						width: width,
						height: height
					});

					$("#"+canvasId).drawLayers();
				}
			};
			//鼠标抬起
			canvas.onmouseup=function(e){

				var color = that.penColor;
				var penWidth = that.penWidth;

				canvas.onmousemove = null;

				var width = e.clientX - canvasLeft - x;
				var height = e.clientY- canvasTop - y;

				$("#"+canvasId).removeLayer('areaLayer');

				$("#"+canvasId).addLayer({
					type: 'rectangle',
					strokeStyle: color,
					strokeWidth: penWidth,
					name:'areaLayer',
					fromCenter: false,
					x: x, y: y,
					width: width,
					height: height
				});

				$("#"+canvasId).drawLayers();
				$("#"+canvasId).saveCanvas();

				// 把body转成canvas
				html2canvas(document.body, {
					scale: 1,
					// allowTaint: true,
					useCORS: true  //跨域使用
				}).then(canvas => {
					var capture_x, capture_y
					if (width > 0) {
						//从左往右画
						capture_x = x + that.penWidth
					}else {
						//从右往左画
						capture_x = x + width + that.penWidth
					}
					if (height > 0) {
						//从上往下画
						capture_y = y + that.penWidth
					}else {
						//从下往上画
						capture_y = y + height + that.penWidth
					}
					printClip(canvas, capture_x, capture_y, Math.abs(width), Math.abs(height))
				});
				// 移除画的选取框
				$("#"+canvasId).removeLayer('areaLayer');
				// 隐藏用于华画取框的canvas
				$("#"+canvasId).hide()
			}
		}
	};

	/**
	 * 选取截屏
	 * @param canvasId
	 */
	function clipScreenshots(canvasId){
		canvasExt.drawRect(canvasId, "red", defaultStrokeWidth);
	}

	/**
	 * 打印截取区域
	 * @param canvas 截取的canvas
	 * @param capture_x 截取的起点x
	 * @param capture_y 截取的起点y
	 * @param capture_width 截取的起点宽
	 * @param capture_height 截取的起点高
	 */
	function printClip(canvas, capture_x, capture_y, capture_width, capture_height) {
		// 创建一个用于截取的canvas
		var clipCanvas = document.createElement('canvas')
		clipCanvas.width = capture_width
		clipCanvas.height = capture_height
		// 截取
		clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
		var clipImgBase64 = clipCanvas.toDataURL()
		// 生成图片
		var clipImg = new Image()
		clipImg.src = clipImgBase64
		var con = confirm('打印截图吗?取消则保存截图')
		if (con) {
			$(clipImg).print()
		}else {
			downloadIamge(clipImgBase64)
		}
	}

	/**
	 * 下载保存图片
	 * @param imgUrl 图片地址
	 */
	function downloadIamge(imgUrl) {
		// 生成一个a元素
		var a = document.createElement('a')
		// 创建一个单击事件
		var event = new MouseEvent('click')
		// 生成文件名称
		var timestamp = new Date().getTime();
		var name = imgUrl.substring(22, 30) + timestamp + '.png';
		a.download = name
		// 将生成的URL设置为a.href属性
		a.href = imgUrl;
		// 触发a的单击事件 开始下载
		a.dispatchEvent(event);
	}

	$(function(){
		var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
		// 更新canvas宽高
		$("#bg_canvas").attr("width", clientWidth);
		$("#bg_canvas").attr("height", clientHeight);

		$("#bg_canvas").hide();
		$(".print").click(function(){
			$("#bg_canvas").show()
			alert('现在你可以使用鼠标拖拽选取打印区域，松开后完成')
			//调用选取截屏
			clipScreenshots("bg_canvas");
		});
	});
</script>
</html>